<template>
  <div>
    <school ref="sch"></school>
<!--    注意:这里的age传入的是一个字符串(都是字符串形式) 在前面加:(v-bind的缩写)这里写的是一个表达式 解决在传入时对数据(数值类型)进行加减的问题-->
    <student name="张三" :age="18" gender="男" ></student>
<!--    给h1加标识 相当于html中的id-->
    <h1 v-text="msg" ref="h1"></h1>
    <button @click="output">点我输出上面的dom</button>
    <hr/>
    <mixin01></mixin01>
    <mixin02></mixin02>
    <hr>
    <input type="text" v-fbind:value="1">
    <h1>{{msg | mySlice}}</h1>
  </div>
</template>

<script>
//导入两个组件
import school from "./components/School.vue";
import student from "./components/Student.vue";
import mixin01 from "./components/mixin01.vue"
import mixin02 from "./components/mixin02.vue"
//作用 用来汇总组件
export default {
  name: "App",
  components: {
    student,
    school,
    mixin01,
    mixin02
  },
  data() {
    return{
      msg:'你好！ 我是彭于晏'
    }
  },
  methods:{
    output() {
      //在vue脚手架中获得dom元素
      console.log(this.$refs.h1)
      //如果是子组件 指向的是子组件的VueComponent实例
      console.log(this.$refs.sch)
    }
  }
}
</script>


<style>
/* 在这里面 你不建议写样式 */

</style>